<template>
  <div>
    <div
      class="table-form"
      v-for="(item, indexs) in tableData"
      :key="item.name"
    >
      <div class="text">
        最大特征值:{{
          ahparr[indexs] ? ahparr[indexs].lambdaMax : null
        }};一致性:{{
          !ahparr[indexs]
            ? null
            : ahparr[indexs].isConsistent
            ? "通过"
            : "未通过"
        }};CR:{{ ahparr[indexs] ? ahparr[indexs].cr : null }};CI:{{
          ahparr[indexs] ? ahparr[indexs].ci : null
        }}
      </div>
      <el-table :data="item[0]" border>
        <el-table-column width="200">
          <template slot-scope="scope">
            <div placeholder="请输入内容" style="width: 100%">
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(items, index) in item[0]"
          :label="items.name"
          width="180"
          :key="items.name"
          :props="items.name"
        >
          <template slot-scope="scope">
            <el-select
              placeholder="请选择"
              v-model="tableDatavaluenew[indexs][scope.$index][index]"
              :disabled="
                (tableDatavaluenew[indexs][scope.$index][index] < 1 &&
                  scope.$index > 0) ||
                scope.row.name == scope.column.label
              "
              @change="
                (val) =>
                  change(tableDatavaluenew[indexs], scope.$index, index, indexs)
              "
            >
              <div v-for="option in data" :key="option.name">
                <el-option
                  v-show="option.value >= 1"
                  :key="option.name"
                  :label="option.name"
                  :value="option.value"
                ></el-option>
              </div>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="btn-submit">
      <el-button @click="submit()">保存</el-button>
      <el-button type="primary" @click="gotohome()">查看图表</el-button>
    </div>
  </div>
</template>

<script>
import AHP from "@/utils/ahp.js"; // 引入AHP算法
export default {
  data() {
    return {
      querydata: this.$route.query.data, // 获取路由传参
      tableData: [],
      tableDatavalue: [],
      tableDatavaluenew: [
        [1, 1, 1],
        [1, 1, 1],
        [1, 1, 1],
      ],
      ahparr: [],
      data: [
        { name: "1:同样重要", value: 1 },
        { name: "2:同等重要", value: 2 },
        { name: "3:稍微重要", value: 3 },
        { name: "4:稍重重要", value: 4 },
        { name: "5:比较重要", value: 5 },
        { name: "6:特别重要", value: 6 },
        { name: "7:非常重要", value: 7 },
        { name: "8:超级重要", value: 8 },
        { name: "1/2:同等不重要", value: 1 / 2 },
        { name: "1/3:稍微不重要", value: 1 / 3 },
        { name: "1/4:稍重不重要", value: 1 / 4 },
        { name: "1/5:比较不重要", value: 1 / 5 },
        { name: "1/6:特别不重要", value: 1 / 6 },
        { name: "1/7:非常不重要", value: 1 / 7 },
        { name: "1/8:超级不重要", value: 1 / 8 },
      ],
    };
  },
  methods: {
    change(data, index1, index2, index3) {
      console.log(index3, "333");
      data[index2][index1] = Number(1 / data[index1][index2]);
      let res = this.getahp(data);
      this.ahparr.splice(index3, 1, res); // 直接赋值会出现响应式失效的问题
    },
    // 跳转到首页
    gotohome() {
      this.$router.push({ name: "home" });
    },
    // 遍历树形结构，如果有children就生成一个数组
    traversetree(node) {
      if (node.children) {
        this.tableData.push([node.children]);
        node.children.forEach((child) => {
          this.traversetree(child);
        });
      }
    },
    traversetreevalue(node) {
      if (node.children) {
        this.tableDatavalue.push(
          node.children.map((i) => {
            return i.value;
          })
        );
        node.children.forEach((child) => {
          this.traversetreevalue(child);
        });
      }
    },
    // 使用ahp算法计算一致性等
    getahp(data) {
      const ahp = new AHP(data);
      const result = ahp.analyze();
      return result;
    },
    // 保存按钮 提交数据
    submit() {
      this.getahp();
    },
  },
  async mounted() {
    await this.traversetree(JSON.parse(this.querydata)[0]);
    await this.traversetreevalue(JSON.parse(this.querydata)[0]);
    this.tableDatavaluenew = this.tableDatavalue.map((i) => {
      return Array.from({ length: i.length }, () => [...i]);
    }); // 构造矩阵
    this.ahparr = JSON.parse(JSON.stringify(this.tableData)); // 使用深拷贝，要不更改ahparr，tableData也会更改
  },
};
</script>

<style>
.table-form {
  padding: 20px;
}
.text {
  font-size: 16px;
  margin-bottom: 20px;
  color: red;
}
.btn-submit {
  padding: 20px;
}
</style>